import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Button, message, Input } from 'antd';
import router from 'umi/router';
import { urlParse } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import LocalPolicy from './ProvidentFund/Index';

const FormItem = Form.Item;

@connect(({ localpolicy }) => ({
  localpolicy,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {
    vno: '',
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const url = location.search;
    const { accuLsPkgId } = urlParse(decodeURIComponent(url));
    const { vno } = urlParse(url);
    this.setState({
      vno,
    });
    dispatch({
      type: 'localpolicy/getDictCode',
      payload: ['BIZ_ACCU_TYPE', 'CARRY_RULE'],
    });
    dispatch({
      type: 'localpolicy/providentFundPolicy',
      payload: { accuLsPkgId },
    });
    dispatch({
      type: 'localpolicy/providentFundInformation',
      payload: { accuLsPkgId },
    });
  }

  prev = () => {
    const { dispatch, localpolicy, form } = this.props;
    const { vno } = this.state;
    const accuLsPkgName = form.getFieldValue('accuLsPkgName');
    dispatch({
      type: 'localpolicy/changeFunGroupName',
      payload: {
        accuLsPkgId: localpolicy.providentFundPolicyId,
        vno,
        accuLsPkgName,
      },
      callback: res => {
        if (res.success) {
          message.success('修改成功！');
          router.goBack();
        } else {
          message.warning(res.message || '修改失败！');
          router.goBack();
        }
      },
    });
  };

  render() {
    const { form, localpolicy } = this.props;
    const formItemLayout2 = {
      labelCol: { md: { span: 10 } },
      wrapperCol: { md: { span: 12 } },
    };
    const { getFieldDecorator } = form;

    return (
      <div>
        <PageHeaderWrapper />
        <Card style={{ marginTop: 12, marginLeft: 12, marginRight: 12 }}>
          <div style={{ marginTop: 22 }}>
            <Row style={{ marginBottom: 50, marginLeft: '35%' }}>
              <Col span={8}>
                <FormItem {...formItemLayout2} label="组合名称">
                  {getFieldDecorator('accuLsPkgName', {
                    rules: [{ required: true, message: '请输入组合名称' }],
                    initialValue: localpolicy.personnelData
                      ? localpolicy.personnelData.accuLsPkgName
                      : '',
                  })(<Input placeholder="请输入组合名称" maxLength={30} />)}
                </FormItem>
              </Col>
            </Row>
            <div>
              <LocalPolicy
                {...this.props}
                isprovidentFund={2}
                isaddBtn={1}
                insuranceInformationData={localpolicy.insuranceInformationData}
              />
            </div>
            <p style={{ textAlign: 'center' }}>
              <Button style={{ marginLeft: 30 }} size="large" onClick={() => this.prev()}>
                保存
              </Button>
            </p>
          </div>
        </Card>
      </div>
    );
  }
}
const BasicListFrom = Form.create()(BasicList);
export default BasicListFrom;
